<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $pageTitle ?></title>
    <style>
        .hero-card { width: 60%; margin: 30px auto; border: 1px solid #ddd; border-radius: 8px; padding: 20px; }
        .hero-image { width: 240px; height: 360px; object-fit: cover; /* 确保图片尺寸正确 */ }
        .info-item { margin: 15px 0; font-size: 16px; }
        .info-label { font-weight: bold; color: #2c3e50; display: inline-block; width: 120px; }
        a.back { display: block; text-align: center; margin: 20px 0; color: #3498db; text-decoration: none; }
        a.back:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <div class="hero-card">
        <h1 style="text-align: center; margin-bottom: 20px;"><?= $hero['name'] ?> 详情</h1>

        <!-- 1. 英雄图片（路径指向 writeable/data/图片名） -->
        <div style="text-align: center; margin-bottom: 20px;">
            <img src="<?= base_url('writeable/data/' . $hero['image']) ?>" 
                 alt="<?= $hero['name'] ?>的照片" 
                 class="hero-image">
        </div>

        <!-- 2. 英雄信息（8个字段，按你的数据顺序调整） -->
        <div class="info-item">
            <span class="info-label">ID：</span>
            <span><?= $hero['id'] ?></span> <!-- 唯一标识符 -->
        </div>
        <div class="info-item">
            <span class="info-label">姓名：</span>
            <span><?= $hero['name'] ?></span> <!-- 英姓名 -->
        </div>
        <div class="info-item">
            <span class="info-label">所在城市：</span>
            <span><?= $hero['city'] ?></span> <!-- 所在城市/国家 -->
        </div>
        <div class="info-item">
            <span class="info-label">代表作品：</span>
            <span><?= $hero['works'] ?></span> <!-- 分类专属字段1：独立游戏开代表作品” -->
        </div>
        <div class="info-item">
            <span class="info-label">开发年限：</span>
            <span><?= $hero['dev_years'] ?> 年</span> <!-- 分类专属字段2：“开发年限” -->
        </div>
        <div class="info-item">
            <span class="info-label">常用引擎：</span>
            <span><?= $hero['engine'] ?></span> <!-- 分类专属字段3：“常用引擎” -->
        </div>
        <div class="info-item">
            <span class="info-label">获奖情况：</span>
            <span><?= $hero['awards'] ?></span> <!-- 分类专属字段4：“获奖情况” -->
        </div>

        <!-- 返回首页按钮 -->
        <a href="<?= base_url('IndieDev') ?>" class="back">← 返回英雄列表</a>
    </div>
</body>
</html>